<template>
    <div class="ind">
        <div class="m_tb_20 p_lr_20 t_a_r">
            <el-button type="primary" @click="onOpenMenuDialog">添加</el-button>
        </div>
        <DialogForm ref="refDialogForm" :configs="configs" :data="formData" :rules="rules"></DialogForm>

        <s-table ref="table" size="default" rowKey="key" :columns="columns" :data="tableData" :alert="true"
            showPagination="auto">
        </s-table>
    </div>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'
import { queryMenus } from '@/api/index'
import DialogForm from '@/components/s-form/dialog-form/index.vue'
import { configColumns } from './config/columns'
import { configFormItems, configFormData, configFormRules } from './config/form'

const dialogVisible = ref(false)
// 表格
const columns = ref(configColumns)
// 表单
const configs = ref(configFormItems)
const formData = ref(configFormData)
const rules = reactive<FormRules>(configFormRules)
const refDialogForm: any = ref(null)

let tableData: any = reactive([])

queryMenus({
    current: 1,
    size: 10,
}).then((data: any) => {
    data.records.forEach((item: any) => {
        tableData.push(item)
    })
});
const onOpenMenuDialog = () => {
    refDialogForm.value.open()
}
defineExpose({
    refDialogForm
})
</script>
